<template>
  <div id="app">
    <headnav />
    <div class="pageMain">
      <!-- <button @click="send">trigger message</button> -->

      <!-- <transition name="fade"> -->
      <keep-alive>
        <router-view
          v-if="$route.meta.keepAlive"
          :key="$route.path"
        ></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <!-- <transition name="fade" mode="out-in">
        <keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>
      </transition> -->
      <!-- <router-view></router-view> -->
      <!-- </transition> -->
      <!-- 复制文本专用 -->
      <textarea v-model="textarea" id="copyText" width="10px" height="10px" style="visibility:none;resize: none;position: fixed; top: -9999px;"></textarea>
    </div>
    <!-- <dynamicNews v-if="userInfo.roleFlag === 2" /> -->
    <Footer />
    <!-- <sideBar /> -->
  </div>
</template>

<script>
import headnav from "@/components/head/index";
import Footer from "@/components/footer/footer";
// import sideBar from "@/components/sideBar/index";
import dynamicNews from "@/components/dynamicNews/dynamicNews";
import { mapState } from "vuex";
import { Local } from '@/util/storage/storage.js'
import { Session } from '@/util/storage/session.js'
export default {
  name: "App",
  components: {
    headnav,
    Footer,
    // sideBar
    // dynamicNews,
  },
  data() {
    return {
      danmus: [],
      client: null
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
    key() {
      return this.$route.path;
    },
  },
  async created() {
    // const userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
    // 判断是否已登录
    let userInfo = Session.get('userInfo', true)
    let uto = localStorage.getItem('UTO') || 0
    if (uto < +new Date()) {
      this.$store.commit("user/removeUserinfolocaStorage", userInfo);
    }
    if (userInfo) {
      this.$store.commit("user/useDeCodeSetUserInfo", userInfo);
      // 获取我的课程
      this.$store.dispatch("courses/getMyCourses", { that: this });
    }
    this.$store.dispatch("user/handleGenerateRoutes");
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  /* text-align: center; */
  color: #2c3e50;
}

body {
  margin: 0;
  padding: 0;
  height: auto;
}

a {
  color: #000;
  text-decoration: none;
}

div {
  box-sizing: border-box;
}

.pageMain {
  /* padding-bottom: 20px; */
  min-height: calc(100vh - 74px - 20px - 150px);
  /* overflow: hidden; */
}
/* tabindex 切换选中 */
.focusing {
  outline: none;
}

p {
  margin: 0;
}

video {
  outline: none;
}

.centered {
  margin: 0 auto;
  display: table;
  font-size: 60px;
  margin-top: 100px;
}

.box {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 8px 20px;
  line-height: 1.3em;
  opacity: 0;
  color: white;
  width: 200px;
  margin: 0 auto;
  margin-top: 30px;
  transform: translateZ(0);
  perspective: 1000px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, 0.1);
  transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1);
}
</style>
